<!-- 提料订单详情 -->
<template>
	<view class="carryOlderDetail">
		<view class="headerBox"></view>
		<view class="nav_bar" :class="{'nav_bar_bg':isSticky}" :style="{paddingTop:statusBar+'px',height:customBar+'px'}">
			<view class="left" @click="$util.backPage(1)">
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="navTiele">订单详情</view>
		</view>
		
		<view class="statusBox flex_j">
			<image src="@/static/imgs/successIcon.png"></image>
			<view v-if="extractObj.status == 0">
				<view class="statusName">待发货</view>
				<view class="statusTxt">等待平台发货</view>
			</view>
			<view v-if="extractObj.status == 1">
				<template v-if="extractObj.type == 1">
					<view class="statusName">待发货</view>
					<view class="statusTxt">请及时确认收货</view>					
				</template>
				<template v-else>
					<view class="statusName">待取货</view>
					<view class="statusTxt">请及时前往门店进行取货</view>					
				</template>
			</view>
			<view v-if="extractObj.status == 2">
				<view class="statusName">已完成</view>
				<view class="statusTxt">感谢您的支持与信任</view>
			</view>
			<view v-if="extractObj.status == 3">
				<view class="statusName">已关闭</view>
				<view class="statusTxt">感谢您的支持与信任</view>
			</view>
		</view>
		
		<view class="delivery">
			<view class='positionBox flex_c'>
				<text class='iconfont icon-dingwei4'></text>
			</view>
			<view class="userFb">
				{{extractObj.real_name}} {{ extractObj.phone}}
				<text class="addressTxt line1">{{extractObj.detail}}</text>
			</view>
		</view>
		
		<view class="card mt_120">
			<view class="olderTxt border_bm">订单号：{{extractObj.order_sn}}</view>
		
			<view class="flex_j ">
				<image src="https://yhf.yjgold.cn//uploads/attach/2024/07/20240704/96d6a1c9ca67b689f2e21520e7d37c82.jpg" mode="aspectFill" class="goodsImg"></image>
				<view class="goodsBox">
					<view class="name">黄金金料</view>
					<view class="greyTxt">提料克重{{extractObj.weight}}g</view>
				</view>
			</view>
		</view>
			
		<view class="typeBox">
			<view class="title">订单信息</view>
			<view class="infoItem">
				<view class="name">订单类型</view>
				<view class="num">提料</view>
			</view>
			<view class="infoItem">
				<view class="name">订单号</view>
				<view class="num">{{extractObj.order_sn}}</view>
			</view>
			<view class="infoItem" v-if="extractObj.type == 1">
				<view class="name">快递费</view>
				<view class="num">到付</view>
			</view>
			<view class="infoItem">
				<view class="name">下单时间</view>
				<view class="num">{{extractObj.add_time}}</view>
			</view>
		</view>
		
		<view class="floorBox" v-if="extractObj.status == 0 || extractObj.status == 1">
			<view class="cancelBtn flex_c" v-if="extractObj.status == 0" @tap="extractCancelFc">取消订单</view>
			<view class="checkBtn flex_c" v-if="extractObj.status == 1 && extractObj.type == 1"
				@tap="$util.JumpPath(`/pages/goods/goods_logistics/index?orderId=${order_sn}`)">查看物流</view>
			<view class="checkBtn flex_c" v-if="extractObj.status == 1 && extractObj.type == 2" @tap="locationFc()">门店导航</view>
		</view>

	</view>
</template>

<script>
	import { HTTP_REQUEST_URL } from '@/config/app.js'
	import {extractInfo,extractCancel} from '@/api/new_store.js'
	export default {
		data() {
			return {
				HTTP_REQUEST_URL,
				customBar: this.customBar,
				statusBar: this.statusBar,
				isSticky: false, // 控制模块是否吸顶
				tagList: ['快递', '自提'],
				tagIndex: 0,
				weightNum:'',
				
				addressName:'' ,// 地址
				
				order_sn:'',
				extractObj:{}
			}
		},
		onPageScroll(e) {
			// 判断滚动距离是否超过状态栏高度
			this.isSticky = e.scrollTop > this.customBar ? true : false
		},
		onLoad(option) {
			if(option.id) {
				this.order_sn = option.id
			}
			this.extractInfoFc()
		},
		methods: {
			extractInfoFc() {
				let that = this
				let obj = { "order_sn": this.order_sn}
				extractInfo(obj).then(res => {
					if(res.status != 200) return
					that.extractObj = res.data
					// console.log('that.extractObj',that.extractObj);
				})
			},
			extractCancelFc() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消订单?',
					success: function (res) {
						if (res.confirm) {
							extractCancel({order_sn:that.order_sn}).then(res => {
								uni.showToast({
									title:res.msg
								})
								uni.navigateBack({delta:1})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			locationFc() {
				if(!this.extractObj.latitude) {
					uni.showToast({
						title: '无法获取位置信息',
						icon: 'none'
					})
					return
				}
				uni.openLocation({
					latitude: this.extractObj.latitude,
					longitude: this.extractObj.longitude,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carryOlderDetail {
		position: relative;
		width: 100%;
		height: 100vh;
		background: rgba(244, 238, 232, 1);
		padding-bottom: 140rpx;
		overflow: hidden;
	}

	.headerBox {
		z-index: 99;
		width: 750rpx;
		height: 540rpx;
		background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
	}

	.nav_bar {
		z-index: 999;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		padding: 0 36rpx;
		box-sizing: border-box;
		.left{
			text{
				color: black;
				font-size: 32rpx;
				transform: rotate(180deg);
				display: block;
			}
		}
	
		.navTiele {
			width: 100%;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 80rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}
		.navTiele::after {
			content: ' ';
			width: 1px;
			height: 1px;
		}
	
	}
	.nav_bar_bg {
		background: #fff;
	}
	
	.statusBox {
		margin-top: -340rpx;
		image {
			width: 68rpx;
			height: 68rpx;
			margin: 0 27rpx 0 56rpx;
		}
		.statusName {
			font-size: 34rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 49.23rpx;
			color: rgba(48, 48, 48, 1);
			text-align: left;
		}
		.statusTxt {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 34.75rpx;
			color: rgba(115, 115, 115, 1);
			text-align: left;
		}
	}
	
	.typeBox {
		position: relative;
		width: 700rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		padding: 26rpx 24rpx 26rpx 24rpx;
		margin: 24rpx auto 0;
		overflow: hidden;
	
		.title {
			position: relative;
			width: 100%;
			height: 80rpx;
			font-size: 32rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 60rpx;
			color: rgba(64, 63, 63, 1);
			text-align: left;
			vertical-align: top;
			padding-left: 10rpx;
			border-bottom: 2rpx solid rgba(246, 246, 246, 1);
	
		}
	
		.title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 16rpx;
			width: 4rpx;
			height: 29rpx;
			background: rgba(242, 208, 150, 1);
	
		}
	
		.infoItem {
			display: flex;
			width: 100%;
			margin-top: 20rpx;
	
			.name {
				flex-shrink: 0;
				width: 140rpx;
				font-size: 28rpx;
				font-weight: 550;
				letter-spacing: 0rpx;
				color: rgba(61, 61, 61, 1);
				text-align: left;
				vertical-align: top;
				margin-right: 36rpx;
			}
	
			.num {
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(122, 122, 122, 1);
				text-align: left;
				vertical-align: top;
			}
	
			.imgList {
				width: 123rpx;
				height: 123rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 10rpx;
			}
		}
	
	}
	
	.delivery {
		position: relative;
		display: flex;
		width: 704rpx;
		height: 142rpx;
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 1);
		margin: 24rpx auto 24rpx;
		padding: 30rpx 26rpx 0 26rpx;
	
		.userFb {
			width: 520rpx;
			font-size: 30rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(64, 63, 63, 1);
			text-align: left;
			margin: 0 14rpx;
		}
		.addressTxt {
			display: inline-block;
			width: 500rpx;
			font-size: 27rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 39.1rpx;
			color: rgba(64, 63, 63, 1);
			margin-top: 16rpx;
		}
		.positionBox {
			width: 57rpx;
			height: 57rpx;
			font-size: 36rpx;
			font-weight: 550;
			border-radius: 50%;
			background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
			text {
				font-size: 38rpx;
				font-weight: 550;
			}
		}
	}
	
	.card {
		width: 702rpx;
		height: 216rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		margin: 24rpx auto 12rpx;
		padding: 28rpx;
		overflow: hidden;
	
		.olderTxt {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 34.75rpx;
			color: rgba(115, 115, 115, 1);
			text-align: left;
			padding-bottom: 20rpx;
			// margin-top: 28rpx;
		}
	
		.goodsBox {
			.name {
				font-size: 30rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 43.44rpx;
				color: rgba(48, 48, 48, 1);
				text-align: left;
			}
	
			.greyTxt {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(102, 102, 117, 1);
				text-align: left;
				margin-top: 8rpx;
			}
		}
	
		.goodsImg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			margin: 16rpx 0;
			margin-right: 40rpx;
		}
	
	}
	
	.floorBox {
		position: relative;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 160rpx;
		padding: 38rpx 28rpx 80rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1rpx solid rgba(237, 237, 237, 1);
		
		.cancelBtn {
			position: absolute;
			top: 26rpx;
			left: 38rpx;
			width: 212rpx;
			height: 73rpx;
			font-size: 28rpx;
			color: rgba(54, 52, 52, 1);
			border-radius: 6rpx;
			background: rgba(232, 232, 232, 1);
		}
		.checkBtn {
			position: absolute;
			top: 26rpx;
			right: 38rpx;
			width: 212rpx;
			height: 73rpx;
			font-size: 28rpx;
			color: rgba(54, 52, 52, 1);
			border-radius: 6rpx;
			background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
		}
	}
	
	.border_bm {
		border-bottom: 2rpx solid #F8F8FA;
	}
</style>